<!-- eslint-disable vue/no-duplicate-attributes -->
<!-- eslint-disable vue/no-parsing-error -->
<template>
  <m-modal
    v-click-outside="handleCancel"
    :visible="visible"
    :width="734"
    :height="310"
    class="v-language-popup"
    :title="$t('属性')"
    :showTitle="true"
    resizable
    @cancel="handleCancel"
    @ok="handleSave"
  >
    <div
      style="width: 100%; height: 100%"
      class="g-ov-auto"
    >
      <MDropdown
        style="border: 1px solid rgb(217, 217, 217); height: 30px; line-height: 30px"
        :disabled="row.readonly || isModelDisabled"
      >
        <div class="g-jc-sb g-pd-lr-8">
          <div class="g-flex-1">{{ locale.value === "en" ? selectedOption.value : selectedOption.label }}</div>
          <div class="g-flex-0">
            <img
              src="statics/icons/app/iconlist2.png"
              class="g-pointer"
            />
          </div>
        </div>
        <template #dropdown>
          <MDropdownMenuItem
            v-for="(item, index) in OpaqueLanguages"
            :key="index"
            @click="handleClickOption(item)"
          >
            <span class="g-pd-lr-8">{{ locale.value === "en" ? item.value : item.label }}</span>
          </MDropdownMenuItem>
        </template>
      </MDropdown>

      <el-input
        v-if="selectedOption.value !== LanguageType.EWX"
        v-model="code"
        type="textarea"
        class="g-m-t-16"
        :rows="15"
        :maxlength="1000"
        :maxLength="1000"
        show-word-limit
        :disabled="row.readonly || isModelDisabled"
      ></el-input>
      <EWXCom
        v-else
        v-model="code"
        @update:modelValue="data => (code = data)"
      ></EWXCom>
    </div>
  </m-modal>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, inject, Ref } from "vue";
import { ClickOutside as vClickOutside } from "element-plus";
import { usePortal } from "@/common/usePortal";
import MDropdown from "@/common/dropdown/Dropdown.vue";
import MDropdownMenuItem from "@/common/dropdown/DropdownMenuItem.vue";
import { CodeLanguage, OpaqueLanguages, LanguageType, languageTypeToLabel } from "./ValueSpecificationTypes";
import { PropertyRow, UpdateValueSpecificationDto } from "../../types";
import { propertyUtil } from "../../PropertyUtil";

import EWXCom from "./LanguagePopupEWXSubComponent.vue";
import { locale } from "@/util/locale";
import { mixPopup } from "@/common/Portal";
defineOptions(
  mixPopup({
    name: "c-language-popup"
  })
);
const isModelDisabled = inject("isModelDisabled") as Ref<boolean>;

const props = defineProps<{
  row: PropertyRow;
}>();

const emit = defineEmits<{
  (event: "sure", data: any): void;
  (event: "close", data: any): void;
}>();

const { visible, handleCancel, handleOk } = usePortal(emit);
const selectedOption = reactive<CodeLanguage>({ label: "自然语言", value: "Natural Language" });
const code = ref("");

onMounted(() => {
  const valueSpecificationInfo = props.row.valueSpecificationInfo;
  if (valueSpecificationInfo) {
    if (valueSpecificationInfo.extraValue) {
      const languageType = valueSpecificationInfo.extraValue as LanguageType;
      setSelectedOption({ label: languageTypeToLabel[languageType], value: languageType });
    }
    if (valueSpecificationInfo.value) {
      code.value = valueSpecificationInfo.value;
    }
  }
});

function handleClickOption(item: CodeLanguage) {
  setSelectedOption(item);
}

function setSelectedOption(item: CodeLanguage) {
  selectedOption.label = item.label;
  selectedOption.value = item.value;
}

async function handleSave() {
  const updateValueSpecification: UpdateValueSpecificationDto = {
    // 创建值模型参数
    extraValue: selectedOption.value,
    value: code.value,
    instanceId: props.row.modelId,
    metaclass: props.row.valueSpecificationInfo?.metaclass,
    projectId: app.activeProject!.config.id,
    valueSpecificationId: props.row.value as string,
    key: props.row.key
  };
  await propertyUtil.updatePropertyAndFresh(props.row, props.row.value, false, updateValueSpecification);
  handleOk();
}
</script>
<style lang="scss" scoped>
.v-language-popup {
  // popup弹窗和dropdown的menu弹窗，层级覆盖，考虑到其他场景或存在popup覆盖dropdown的情况，仅在此修改z-index优先级
  z-index: 998 !important;
  ._content {
    height: 180px;
    overflow-y: auto;
  }
}
</style>
